<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息统计</title>
        <!-- 引入vue项目，必须在elementui之前引入 -->
   <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
       <!-- 引入样式 -->
       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel='stylesheet' href='css/form.css'>
</head>
<body>
    <div id="app">
        <el-form class='main' ref="checkForm" :model="checkForm" size="medium" label-position="top" label-width="145px" :rules="rules">
            <el-form-item label="姓名" prop="name">
              
              <el-input v-model="checkForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio v-model="checkForm.sex" label="0">男</el-radio>
                <el-radio v-model="checkForm.sex" label="1">女</el-radio>
            </el-form-item>
            <el-form-item label="入学时间" prop="admissionDate">
                <el-date-picker
                editable="false"
                v-model="checkForm.admissionDate"
                type="month"
                placeholder="选择年月">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="在校学习专业" prop="major">
                <el-input v-model="checkForm.major"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="checkForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="现（原）工作单位" prop="workOrganization">
                <el-input v-model="checkForm.workOrganization"></el-input>
            </el-form-item>
            <el-form-item label="现（原）职务" prop="positionNow">
                <el-input v-model="checkForm.positionNow"></el-input>
            </el-form-item>
            <el-form-item label="拟自荐理事会职务" prop="positionWant">
                <el-select v-model="checkForm.positionWant"  placeholder="请选择职务" style="width: 180px;"  :popper-append-to-body="false">
                    <div v-for="(item, index) in positionList" :key="index" class="select">
                      <el-option :label="item.title" :value="item.id" class="select"></el-option>
                    </div>
                  </el-select>
            </el-form-item>
            <el-button class="btn" type="primary" :disabled="buttonDisabled" @click="submitForm('checkForm')">提交</el-button>
        </el-form>
    </div>

    <script src='api/axios.min.js'></script>
    <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
                buttonDisabled:false,
                checkForm:{
                    name:'',
                    sex:'',
                    admissionDate:'',
                    major:'',
                    phone:'',
                    workOrganization:'',
                    positionNow:'',
                    positionWant:''
                },
                positionList:[
                    {
                        id:0,
                        title:'会长'
                    },
                    {
                        id:1,
                        title:'副会长'
                    },
                    {
                        id:2,
                        title:'秘书长'
                    },
                    {
                        id:3,
                        title:'理事'
                    },
                ],
                 visible: false ,
                 num:0,
                 rules: {
                    name: [
                        { required: true, message: '请输入你的姓名', trigger: 'blur' },
                        { min: 2, message: '长度在大于1个字符', trigger: 'blur' }
                    ],
                    sex: [
                         { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    admissionDate: [
                         { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    major:[
                        { required: true, message: '请输入你的专业', trigger: 'blur' },
                    ],
                    phone:[
                        { required: true, message: '请输入你的电话', trigger: 'blur' },
                        { min: 5, max: 11, message: '长度在 5 到 11个字符', trigger: 'blur' }
                    ],
                    workOrganization:[
                        { required: true, message: '请输入你的现（原）工作单位', trigger: 'blur' },
                    ],
                    positionNow:[
                        { required: true, message: '请输入你现（原）职务', trigger: 'blur' },
                    ],
                    positionWant:[
                        { required: true, message: '请输入你想要的职务', trigger: 'blur' },
                    ]
                  },
                }
          },
          created(){
          },
          methods:{ 
            submitForm(formName) { 
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // console.log(this.checkForm)
                    axios.post("http://82.157.140.177:8001/ucenter/student_data/add",this.checkForm)
                    .then((res)=>{
                        this.$message({
                             message: '感谢你的填写',
                             type: 'success'
                        })
                        setTimeout(function(){
                            alert('你已填写完毕，感谢你的参与')
                            window.location.href('http://127.0.0.1:5500/info_form/over.html')
                            // window.location.replace('http://82.157.140.177:8080/info_form/over.html')
                            window.history.back(-1)
                            // window.location.href='http://82.157.140.177:8080/info_form/over.html'
                        },2000)
                         console.log(res.data)
                     })
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
          }
        })
    </script>
</body>
</html>